<template>
  <div class="GdXceoAppLookResources-container">
    <GdwyyAppBigTitle
      title="看资源"
      color="puple"
      icon="zl/icon_kzy"
      :customTips="`账期：${data.source_month || ''}`"
    ></GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div v-else class="top main block-pd">
      <div
        :class="[
          (index === 0 || index === 2 || index === 4) && 'mgl',
          `bg_${index}`,
          item.kpiCode === selsectedCard.kpiCode && 'selected-card',
        ]"
        v-for="(item, index) in cardList"
        :key="index + 'kzy'"
        class="block-pd item-card color333"
        @click="handleChangeCard(item, index)"
      >
        <div class="font-14">{{ item.label }}</div>
        <div class="font-24">
          {{ item.customRender(data[item.model] || 0) }}
          <span class="font-14">{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <van-loading v-if="echartsLoading" type="spinner" color="#1989fa" />
    <div v-show="!echartsLoading" class="block-pd main mgt">
      <div class="flex flex-between fill-w">
        <div class="font-14 circle-title">{{ selsectedCard.label }} - 趋势分析</div>
        <!-- <div class="font-12 color999">单位：户</div> -->
      </div>
      <div id="qsfx-echarts" class="fill-w qsfx-echarts"></div>
    </div>
  </div>
</template>

<script>
import { GdwyyAppSmallTitle, GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import renderEcharts from './echarts'
import { parseResultAction } from '@/api/manage'

const _apiConfig = [
  {
    url: '2c3a07178ba92724018c18baaedc002f',
    resultParamsName: 'data',
    loading: 'loading',
  },
]
export default {
  name: 'GdXceoAppLookResources',
  components: { GdwyyAppSmallTitle, GdwyyAppBigTitle },
  mixins: [reconsitutionMixin],
  data() {
    return {
      queryParam: {
        gridId: '',
        dayId: '',
      },
      loading: false,
      data: {},
      selsectedCard: {},
      cardList: [
        {
          kpiCode: 'RS_0001',
          label: '营服住户数',
          model: 'house_num',
          unit: '户',
          customRender: (val) => {
            return Number(val || 0).toLocaleString()
          },
        },
        {
          kpiCode: 'RS_0002',
          label: '端口规模(到达值)',
          model: 'port_num_total',
          unit: '个',
          customRender: (val) => {
            return Number(val || 0).toLocaleString()
          },
        },
        {
          kpiCode: 'RS_0006',
          label: '用户(到达值)',
          model: 'user_arrive_value',
          unit: '户',
          customRender: (val) => {
            return Number(val || 0).toLocaleString()
          },
        },
        {
          kpiCode: 'RS_0007',
          label: '端口实占率',
          model: 'port_process_rate',
          unit: '%',
          customRender: (val) => {
            return Math.round((val || 0) * 10000) / 100
          },
        },
        {
          kpiCode: 'RS_0008',
          label: '资源覆盖率',
          model: 'resource_cover_rate',
          unit: '%',
          customRender: (val) => {
            return Math.round((val || 0) * 10000) / 100
          },
        },
        {
          kpiCode: 'RS_0009',
          label: '市场渗透率',
          model: 'market_permeate_rate',
          unit: '%',
          customRender: (val) => {
            return Math.round((val || 0) * 10000) / 100
          },
        },
      ],
      echartsLoading: false,
    }
  },

  created() {
    const that = this
    that.initData()

    function main(e) {
      // that.loading = true
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        // const params = { ...that.queryParam, monthId: that.queryParam.dayId.slice(0, 6) }
        // delete params.dayId
        // that.setAllRequest(_apiConfig, params)
        // that.handleChangeCard(that.cardList[3])
        that.queryParam.gridId = localStorage.getItem('$gridId')
        that.initDataPostHook()
      }
    }
    // 此处的监听 似乎是只在app中生效,在本地开的前端服务是不生效的
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook() {
      const params = { ...this.queryParam, monthId: this.queryParam.dayId.slice(0, 6) }
      delete params.dayId
      this.setAllRequest(_apiConfig, params)
      this.handleChangeCard(this.cardList[3])
    },
    handleChangeCard(item) {
      if (this.selsectedCard.kpiCode === item.kpiCode) return
      this.selsectedCard = item
      this.getEchartsData()
    },
    async getEchartsData() {
      this.echartsLoading = true
      const params = {
        monthId: this.queryParam.dayId.slice(0, 6),
        gridId: this.queryParam.gridId,
        kpiCode: this.selsectedCard.kpiCode,
      }
      const { result } = await parseResultAction('2c3a07178ba92724018c18bcf0840030', params)

      const x = [],
        year = [],
        lastYear = [],
        currentMonth = this.queryParam.dayId.slice(0, 6)
      result.forEach(({ month, house_num_year, house_num_last_year }) => {
        x.push(month)
        if (month <= currentMonth) {
          year.push(this.selsectedCard.unit === '%' ? Math.round(house_num_year * 10000) / 100 : house_num_year)
        }
        lastYear.push(
          this.selsectedCard.unit === '%' ? Math.round(house_num_last_year * 10000) / 100 : house_num_last_year
        )
      })
      this.echartsLoading = false

      this.$nextTick(() => {
        renderEcharts({
          tagId: 'qsfx-echarts',
          data: {
            x,
            year,
            lastYear,
            unit: this.selsectedCard.unit,
          },
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdXceoAppLookResources-container {
  margin-bottom: 3.2vw;
  .mgt {
    padding-top: 4vw;
    padding-bottom: 4vw;
  }
  .top {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .main {
    background-color: #fff;

    .mgl {
      margin-right: 3.2vw;
    }
    .item-card {
      .bg('zl/kzy_yfzhs.png');
      width: 44vw;
      height: 21.3333vw;
      margin-top: 3.2vw;
      padding-bottom: 4vw;
      padding-top: 4vw;
    }
    .bg_1 {
      .bg('zl/kzy_dkgm.png');
    }
    .bg_2 {
      .bg('zl/kzy_yh.png');
    }
    .bg_3 {
      .bg('zl/kzy_dkszl.png');
    }
    .bg_4 {
      .bg('zl/kzy_zyfgl.png');
    }
    .bg_5 {
      .bg('zl/kzy_scstl.png');
    }

    .selected-card {
      border-radius: 3.2vw;
      &.bg_0 {
        border: 0.2667vw solid #aeaef7;
      }
      &.bg_1 {
        border: 0.2667vw solid #53a1d8;
      }
      &.bg_2 {
        border: 0.2667vw solid #f2ab52;
      }
      &.bg_3 {
        border: 0.2667vw solid #64ca7c;
      }
      &.bg_4 {
        border: 0.2667vw solid #5e8bf7;
      }
      &.bg_5 {
        border: 0.2667vw solid #ef8a63;
      }
    }

    .qsfx-echarts {
      height: 32vw;
    }
  }
}
</style>